<!--
 * @Description：系统基础管理---系统设置
 * @author： wlj
 * @date： 2025/06/26 14:54:16
!-->
<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统设置</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="系统名" prop="title">
          <el-input v-model="form.title" placeholder="请输入系统名" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="系统英文名" prop="titleEn">
          <el-input v-model="form.titleEn" placeholder="请输入系统英文名" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <div class="bc-row">
          <el-form-item label="logo" prop="logo">
            <div v-if="logoUrl" class="sys-image">
              <el-image ref="previewLogoImg" :src="logoUrl" class="si-img" :preview-src-list="[logoUrl]"></el-image>
              <div class="si-mask">
                <i class="el-icon-zoom-in c-p" @click="handlePreview('logo')"></i>
                <i class="el-icon-delete c-p" @click="handleDelete('logo')"></i>
              </div>
            </div>
            <div v-else class="sys-frame">
              <i class="el-icon-plus sf-icon"></i>
              <input id="fileLPath" ref="fileLadd" type="file" class="sf-input" @change="getLogofile($event)">
            </div>
            <div class="tip-text">格式支持：.png 或 .jpeg 或 .jpeg 或 .svg</div>
          </el-form-item>
          <el-form-item label="网站图标" prop="favicon">
            <div v-if="favUrl" class="sys-image">
              <el-image ref="previewFavImg" :src="favUrl" class="si-img" :preview-src-list="[favUrl]"></el-image>
              <div class="si-mask">
                <i class="el-icon-zoom-in c-p" @click="handlePreview('fav')"></i>
                <i class="el-icon-delete c-p" @click="handleDelete('fav')"></i>
              </div>
            </div>
            <div v-else class="sys-frame">
              <i class="el-icon-plus sf-icon"></i>
              <input id="fileFPath" ref="fileFadd" type="file" class="sf-input" @change="getFavfile($event)">
            </div>
            <div class="tip-text">格式支持：.ico</div>
          </el-form-item>
        </div>
        <div class="foot-btn">
          <el-button type="primary" @click="submitForm('form')">保  存</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统备案信息</span>
      </div>
      <el-form ref="BAForm" :model="BAForm" :rules="BARules">
        <el-form-item label="备案信息" prop="description">
          <el-input v-model="BAForm.description" placeholder="请输入备案信息" type="textarea" :autosize="{ minRows: 2 }" show-word-limit maxlength="1000"></el-input>
        </el-form-item>
        <div class="foot-btn">
          <el-button type="primary" @click="submitBAForm('BAForm')">保  存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { sysConfigInfo, sysEditConfig, sysConfigBeiAn, sysEditBeiAnConfig } from '@/api/basic/platformSet'
export default {
  name: '',
  data() {
    return {
      fullscreenLoading: false,
      form: {
        title: '',
        titleEn: '',
        logo: '',
        favicon: '',
        platform: ''
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        logo: [{ required: true, message: 'logo不能为空', trigger: 'blur' }],
        favicon: [{ required: true, message: '网站图标不能为空', trigger: 'blur' }]
      },
      logoUrl: '',
      favUrl: '',
      BAForm: {
        description: '',
        platform: '',
        copyright: '',
        logo: ''
      },
      BARules: {
        description: [{ required: false, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  async mounted() {
    this.$refs.fileLadd = '' // 清空file文件
    this.$refs.fileFadd = '' // 清空file文件
    await this.getDetail()
  },
  methods: {
    async getDetail() {
      this.fullscreenLoading = true
      // 获取系统设置信息
      await sysConfigInfo({ platform: 'ADMIN' }).then(res => {
        if (res.success) {
          const rd = res.data
          this.form = rd.data
          this.logoUrl = this.form.logo
          this.favUrl = this.form.favicon
        }
      }).catch(() => {
        this.fullscreenLoading = false
      })
      await sysConfigBeiAn({ platform: 'ADMIN' }).then(res => {
        if (res.success) {
          const rd = res.data
          this.BAForm = rd.data
          this.BAForm.description = this.BAForm.description === ' ' ? '' : this.BAForm.description
          this.fullscreenLoading = false
        }
      }).catch(() => {
        this.fullscreenLoading = false
      })
    },
    // 获得文件---logo
    getLogofile(event) {
      const inputDOM = event.target
      if (!inputDOM.files || inputDOM.files.length === 0) {
        return
      }
      const file = inputDOM.files[0]
      // 注意有的是取值 event.target.files[0]  有的是取值 event.detail.file
      if (file.type !== 'image/svg+xml' && file.type !== 'image/png' && file.type !== 'image/jpg' && file.type !== 'image/jpeg') {
        return this.$message.warning('请上传图片，格式支持：.png 或 .jpeg 或 .jpeg 或 .svg')
      }
      const _this = this
      var reader = new FileReader()
      reader.readAsDataURL(inputDOM.files[0])
      reader.onload = function(e) {
        var base = e.target.result
        // 图片的base64码，可以直接赋值给img的src显示图片
        _this.form.logo = _this.logoUrl = base
      }
      this.resetFileInput(inputDOM)
    },
    // 获得文件---favicon
    getFavfile(event) {
      const inputDOM = event.target
      if (!inputDOM.files || inputDOM.files.length === 0) {
        return
      }
      const file = inputDOM.files[0]
      // 注意有的是取值 event.target.files[0]  有的是取值 event.detail.file
      if (file.type !== 'image/x-icon') {
        this.$message.warning('请上传图片，格式支持：.ico')
        this.resetFileInput(inputDOM)
        return
      }
      const _this = this
      var reader = new FileReader()
      reader.readAsDataURL(inputDOM.files[0])
      reader.onload = function(e) {
        var base = e.target.result
        // 图片的base64码，可以直接赋值给img的src显示图片
        _this.form.favicon = _this.favUrl = base
      }
      this.resetFileInput(inputDOM)
    },
    // 将input置空 否则上传相同文件无反应
    resetFileInput(inputDOM) {
      inputDOM.value = ''
      if (inputDOM.type === 'file') {
        inputDOM.type = ''
        inputDOM.type = 'file'
      }
    },
    // 预览大图
    handlePreview(type) {
      if (type === 'logo') {
        this.$refs.previewLogoImg.clickHandler()
      }
      if (type === 'fav') {
        this.$refs.previewFavImg.clickHandler()
      }
    },
    // 删除
    handleDelete(type) {
      if (type === 'logo') {
        this.form.logo = this.logoUrl = ''
      }
      if (type === 'fav') {
        this.form.favicon = this.favUrl = ''
      }
    },
    // 保存--基础设置
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          const params = {
            title: this.form.title,
            titleEn: this.form.titleEn,
            logo: this.form.logo,
            favicon: this.form.favicon,
            platform: 'ADMIN'
          }
          sysEditConfig(params).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.fullscreenLoading = false
              window.location.reload()
            }
          }).catch(() => {
            this.fullscreenLoading = false
          })
        }
      })
    },
    // 保存-备案信息
    submitBAForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          const params = {
            description: this.BAForm.description || ' ',
            platform: 'ADMIN',
            copyright: this.BAForm.copyright || ' ',
            logo: this.BAForm.logo || ' '
          }
          sysEditBeiAnConfig(params).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.fullscreenLoading = false
              window.location.reload()
            }
          }).catch(() => {
            this.fullscreenLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.img-size{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.sys-image{
  @extend .img-size;
  margin-top: 50px;
  cursor: pointer;
  position: relative;
  .si-img{
    @extend .img-size;
    border:1px solid #dddddd;
    background: #dddddd;
  }
  .si-mask{
    @extend .img-size;
    position: absolute;
    opacity: 0;
    background: rgba(4, 20, 41, 0.4);
    z-index: 100;
    top: 0px;
    color: #fff;
    font-size:20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
.sys-image:hover .si-mask {
  opacity: 1;
  cursor: default;
}
.sys-frame{
  @extend .img-size;
  border:1px solid #dddddd;
  margin-top: 50px;
  position: relative;
  .sf-icon{
    font-size: 32px;
    color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .sf-input{
    font-size: 6px;
    opacity: 0;
  }
  .sf-input::file-selector-button{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border:1px solid #dddddd;
    background: #f00;
    cursor: pointer;
  }
}

.foot-btn{
  text-align: center;
}
.box-card{
  margin-bottom:20px;
  .bc-row{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    margin-bottom: 20px;
  }
}
</style>
